<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-01-06 17:19:38
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-04-04 13:36:15
 * @FilePath: \mould\src\components\public\ConsumptionCharts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="com-container" style="fontSize:12px">
    <!-- :style="popheight+'px'" :style="RiskWidth" -->
    <div class="com-chart com-charts" ref="echarts" style="z-index: 555; position: relative"></div>
  </div>
</template>

<script>


export default {
  props: ["commonData", "time1", "time2", "checkType", "aggregateData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xData: null,
      seriesData: null,
      dataOption: null,
      legendData: null
    };
  },
  watch: {
    // commonData: function (data) {
    //     this.allData = data

    //     this.getData();
    // },
    commonData: {
      handler(newVal) {
        if (newVal) {

          this.allData = newVal;

          this.getData();

        }
      },
      immediate: true,
    },

    checkType: {
      handler(newVal) {
        if (newVal) {
          this.xData = newVal;
          this.getData();
        }
      },
      immediate: true,
    },
    aggregateData: {
      handler(newVal) {
        if (newVal) {
          this.legendData = newVal;
          this.getData();
        }
      },
      immediate: true,
    },

    time1: function () {
    },
    time2: function () {
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();
      // this.getData();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);


      var option = {
        title: {
          left: "center",
        },

        grid: {
          left: "5%",
          right: "5%",
          bottom: "12%",
          top: "13%",
          containLabel: true,
        },
        legend: {
          left: "center",
          top: "5%",
          icon: 'roundRect',
          textStyle: {
            color: "#90979c",
          },
        },

        calculable: true,
        xAxis: [
          {
            type: "category",

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
              lineStyle: {
                color: "#DEDEDE",
              },
            },
            // data: xData,
          },
        ],

        yAxis: [
          {
            type: "value",
            name: "kg",

            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#9D9EA0",
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                color: "#DEDEDE",
                type: "dotted",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#9D9EA0",
              },
            },
          },
        ],

        dataZoom: [
          {
            show: true,
            height: 10,
            xAxisIndex: [0],
            bottom: 60,

            start: 10,
            end: 80,
            // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            // handleSize: '110%',
            // handleStyle: {
            //     color: "#5B3AAE",
            // },
            // textStyle: {
            //     color: "rgba(204,187,225,0.5)",
            // },
            // fillerColor: "rgba(67,55,160,0.4)",
            // borderColor: "rgba(204,187,225,0.5)",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {

      var data = this.allData.data;

      var type = this.xData;

      var F_WaterActualValue = []; //水
      var F_Cement1ActualValue = []; // 水泥1
      var F_Cement2ActualValue = []; // 水泥2
      var F_Aggregate1ActualValue = []; // 骨料1
      var F_Aggregate2ActualValue = []; // 骨料2
      var F_Aggregate3ActualValue = []; // 骨料3
      var F_Aggregate4ActualValue = []; // 骨料4
      var F_Aggregate5ActualValue = []; // 骨料5
      var F_OreActualValue = []; // 粉煤灰
      var F_FlyashActualValue = []; // 矿粉
      var F_Admixture1ActualValue = []; // 外加剂1
      var F_Admixture2ActualValue = []; // 外加剂2
      var xData = [];
      if (data) {
        data.map((i) => {
          xData.push(i.F_DischargeDates);
          F_WaterActualValue.push(
            i.F_WaterActualValue //水
          );
          F_Cement1ActualValue.push(
            i.F_Cement1ActualValue //水泥1
          );
          F_Cement2ActualValue.push(
            i.F_Cement2ActualValue //水泥1
          );
          F_Aggregate1ActualValue.push(
            i.F_Aggregate1ActualValue //水泥1
          );
          F_Aggregate2ActualValue.push(
            i.F_Aggregate2ActualValue //骨料2
          );
          F_Aggregate3ActualValue.push(
            i.F_Aggregate3ActualValue //骨料3
          );
          F_Aggregate4ActualValue.push(
            i.F_Aggregate4ActualValue //骨料4
          );
          F_Aggregate5ActualValue.push(
            i.F_Aggregate5ActualValue //骨料5
          );
          F_OreActualValue.push(
            i.F_OreActualValue //粉煤灰
          );
          // F_Aggregate5ActualValue.push(0//骨料5
          // )
          // F_OreActualValue.push(0//粉煤灰
          // )
          F_FlyashActualValue.push(
            i.F_FlyashActualValue //矿粉
          );
          F_Admixture1ActualValue.push(
            i.F_Admixture1ActualValue //外加剂1
          );
          F_Admixture2ActualValue.push(
            i.F_Admixture2ActualValue //外加剂2
          );
        });
      }

      var that = this;

      setTimeout(() => {
        if (type && data) {
          that.updateChart(
            type,
            xData,
            data,
            F_WaterActualValue,
            F_Cement1ActualValue,
            F_Cement2ActualValue,
            F_Aggregate1ActualValue,
            F_Aggregate2ActualValue,
            F_Aggregate3ActualValue,
            F_Aggregate4ActualValue,
            F_Aggregate5ActualValue,
            F_OreActualValue,
            F_FlyashActualValue,
            F_Admixture1ActualValue,
            F_Admixture2ActualValue,
            this.legendData
          );
        }
      }, 500);
    },
    updateChart(
      type,
      xData,
      data,
      data1,
      data2,
      data3,
      data4,
      data5,
      data6,
      data7,
      data8,
      data9,
      data10,
      data11,
      data12,
      legendData
    ) {
      var seriesTotal = [
        {
          name: "水",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#6DC5E0",
          },

          data: data1,
        },
        {
          name: "水泥1",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#4BB6E5",
          },

          data: data2,
        },
        {
          name: "水泥2",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#FF9A8C",
          },
          data: data3,
        },
        {
          name: legendData[0],
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#96EDD3",
          },
          data: data4,
        },
        {
          name: legendData[1],
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#59939A",
          },
          data: data5,
        },
        {
          name: legendData[2],
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#B1BAAC",
          },
          data: data6,
        },
        {
          name: legendData[3],
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#DBA390",
          },
          data: data7,
        },
        {
          name: legendData[4],
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#FFC87D",
          },
          data: data8,
        },
        {
          name: "矿粉",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#595F6A",
          },
          data: data9,
        },
        {
          name: "粉煤灰",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#9BBD9B",
          },
          data: data10,
        },
        {
          name: "外加剂1",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#E95F85",
          },
          data: data11,
        },
        {
          name: "外加剂2",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#DB99C6",
          },
          data: data12,
        },
        {
          name: "全选",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#778CCD",
          },

        },
        {
          name: "全不选",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            color: "#D0E3FC",
          },
        },
      ];
      // var series = [];
      // type.map((item) => {
      //   seriesTotal.map((i) => {
      //     if (item == i.name) {
      //       series.push(i);
      //     }
      //   });
      // });

      this.seriesData = seriesTotal;
      var that = this
      var dataOption = {
        title: {
          text:
            this.time1.substr(0, 10) +
            "至" +
            this.time2.substr(0, 10) +
            "材料走势分析图",
        },
        legend: {
          data: [
            "全选", "全不选",
            "水",
            "水泥1",
            "水泥2",
            legendData[0],
            legendData[1],
            legendData[2],
            legendData[3],
            legendData[4],
            "矿粉",
            "粉煤灰",
            "外加剂1",
            "外加剂2",
          ],
          selected: this.checkType

        },
        tooltip: {
          show: true,
          formatter: function (params) {

            var str = "";
            str =
              "工程名称:" +
              data[params.dataIndex].F_EngineeringName +
              "<br/>" +
              "工程部位:" +
              data[params.dataIndex].F_EngineeringPartName +
              "(t/h)" +
              "<br/>" +
              "实际方量:" +
              data[params.dataIndex].F_ActualCalculation +
              "(t)" +
              "<br/>" +
              "强度等级:" +
              data[params.dataIndex].F_StrengthGrade +
              "<br/>" +
              "出料时间:" +
              data[params.dataIndex].F_DischargeDates +
              "<br/>" +
              params.seriesName +
              ":" +
              params.value +
              "(kg)";

            return str;
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              lang: [this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "材料走势分析图", '关闭'],
              optionToContent: function (opt) {
                var series = opt.series;
                var str = ''
                var legend = ['水', '水泥1', '水泥2', legendData[0], legendData[1], legendData[2], legendData[3], legendData[4], '矿粉', '粉煤灰', '外加剂1', '外加剂2']
                var s = []
                legend.map(item => {
                  if (that.checkType[item] == true) {
                    s.push(item)
                  }
                })

                s.map((item) => {
                  str += '<td>' + item + '</td>'
                })
                var table = `<table class="echartsTable"><tbody><tr>`
                  + '<td >工程名称</td>'
                  + '<td >工程部位</td>'
                  + '<td >实际方量</td>'
                  + '<td >强度等级</td>'
                  + str
                  + '<td >出料时间</td>'
                  + '</tr>';
                var lineData = []
                series.map(item => {
                  s.map(i => {
                    if (item.name == i) {
                      lineData.push(item)
                    }
                  })
                })

                for (var i = 0, l = data.length; i < l; i++) {
                  if (s.length == 0) {
                    table += '<tr>'
                      + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  }
                  else if (s.length == 1) {
                    table += '<tr>'
                      + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  }
                  else if (s.length == 2) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 3) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 4) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 5) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 6) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>' + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 7) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 8) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td >' + lineData[7].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 9) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td >' + lineData[7].data[i] + '</td>'
                      + '<td >' + lineData[8].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 10) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>'
                      + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td >' + lineData[7].data[i] + '</td>'
                      + '<td >' + lineData[8].data[i] + '</td>'
                      + '<td >' + lineData[9].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 11) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td >' + lineData[7].data[i] + '</td>'
                      + '<td >' + lineData[8].data[i] + '</td>'
                      + '<td >' + lineData[9].data[i] + '</td>'
                      + '<td >' + lineData[10].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  } else if (s.length == 12) {
                    table += '<tr>' + '<td>' + data[i].F_EngineeringName + '</td>'
                      + '<td>' + data[i].F_EngineeringPartName + '</td>'
                      + '<td>' + data[i].F_ActualCalculation + '</td>'
                      + '<td>' + data[i].F_StrengthGrade + '</td>'
                      + '<td >' + lineData[0].data[i] + '</td>'
                      + '<td >' + lineData[1].data[i] + '</td>' + '<td >' + lineData[2].data[i] + '</td>'
                      + '<td >' + lineData[3].data[i] + '</td>'
                      + '<td >' + lineData[4].data[i] + '</td>'
                      + '<td >' + lineData[5].data[i] + '</td>'
                      + '<td >' + lineData[6].data[i] + '</td>'
                      + '<td >' + lineData[7].data[i] + '</td>'
                      + '<td >' + lineData[8].data[i] + '</td>'
                      + '<td >' + lineData[9].data[i] + '</td>'
                      + '<td >' + lineData[10].data[i] + '</td>'
                      + '<td >' + lineData[11].data[i] + '</td>'
                      + '<td>' + data[i].F_DischargeDates + '</td>'
                      + '</tr>';
                  }
                }
                table += '</tbody></table>';
                return table;
              }
            },
            magicType: {
              type: ["line", "bar"],
              option: {
                type: "line",
              },
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            data: xData,
          },
        ],
        series: seriesTotal,
      };
      this.chartInstance.off('legendselectchanged') //解决重复触发
      var 全选 = "全选";
      var 全不选 = "全不选";
      var 水 = "水";
      var 水泥1 = "水泥1";
      var 水泥2 = "水泥2";
      var 骨料1 = legendData[0];
      var 骨料2 = legendData[1];
      var 骨料3 = legendData[2];
      var 骨料4 = legendData[3];
      var 骨料5 = legendData[4];
      var 矿粉 = "矿粉";
      var 粉煤灰 = "粉煤灰";
      var 外加剂1 = "外加剂1";
      var 外加剂2 = "外加剂2";
      this.chartInstance.on('legendselectchanged', (params) => {
        console.log(params.selected);
        var selected = params.selected;
        var name = params.name;

        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
        // 使得 无 selected 对象
        if (name == '全选' && params.selected.全选 == true) {//需要配置一个legend为‘全选’的名称

          selected = {
            // 全选: true,
            // 全不选: false,
            // 水: true,
            // 水泥1: true,
            // 水泥2: true,
            // 骨料1: true,
            // 骨料2: true,
            // 骨料3: true,
            // 骨料4: true,
            // 骨料5: true,
            // 矿粉: true,
            // 粉煤灰: true,
            // 外加剂1: true,
            // 外加剂2: true,
          }

          selected[全选] = true;
          selected[全不选] = false;
          selected[水] = true;
          selected[水泥1] = true;
          selected[水泥2] = true;
          selected[骨料1] = true;
          selected[骨料2] = true;
          selected[骨料3] = true;
          selected[骨料4] = true;
          selected[骨料5] = true;
          selected[矿粉] = true;
          selected[粉煤灰] = true;
          selected[外加剂1] = true;
          selected[外加剂2] = true;






        } else if (name == '全不选' && params.selected.全不选 == true) {
          selected = {
            // 全选: false,
            // 全不选: true,
            // 水: false,
            // 水泥1: false,
            // 水泥2: false,
            // 骨料1: false,
            // 骨料2: false,
            // 骨料3: false,
            // 骨料4: false,
            // 骨料5: false,
            // 矿粉: false,
            // 粉煤灰: false,
            // 外加剂1: false,
            // 外加剂2: false,
          }


          selected[全选] = false;
          selected[全不选] = true;
          selected[水] = false;
          selected[水泥1] = false;
          selected[水泥2] = false;
          selected[骨料1] = false;
          selected[骨料2] = false;
          selected[骨料3] = false;
          selected[骨料4] = false;
          selected[骨料5] = false;
          selected[矿粉] = false;
          selected[粉煤灰] = false;
          selected[外加剂1] = false;
          selected[外加剂2] = false;
        } else {
          if (selected.外加剂1 == true && selected.外加剂2 == true && selected.水 == true && selected.水泥1 == true && selected.水泥2 == true && selected.矿粉 == true && selected.粉煤灰 == true && selected[骨料1] == true && selected[骨料2] == true && selected[骨料3] == true && selected[骨料4] == true && selected[骨料5] == true) {
            selected.全选 = true
            selected.全不选 = false
          }
          else if (selected.外加剂1 == false && selected.外加剂2 == false && selected.水 == false && selected.水泥1 == false && selected.水泥2 == false && selected.矿粉 == false && selected.粉煤灰 == false && selected[骨料1] == false && selected[骨料2] == false && selected[骨料3] == false && selected[骨料4] == false && selected[骨料5] == false) {
            selected.全选 = false
            selected.全不选 = true
          } else {
            selected.全选 = false
            selected.全不选 = false
          }




          selected = params.selected
        }
        this.$emit('clickLegend', selected)
      })
      this.dataOption = dataOption;
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;


      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
    clear() {

      // 清空上次echart数据
      for (var i = 0; i < this.seriesData.length; i++) {
        //置空关键！！！  清空名字和数据
        this.seriesData[i].data = [];
        this.seriesData.name = "";
      }
      this.chartInstance = null;

      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      this.chartInstance.setOption(this.dataOption); //重新setOption
      // this.legend=[]
    },
  },
};
</script>

<style lang="less" scope>
.com-chart::after {
  //     display: block;
  //     content: "123";
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //   width: 50px;
  //   height: 40px;
  //   border: 1px solid red;
  //   z-index: 9999;
}

.com-charts ::after {
  //   display: block;
  //   content: "123";
  //   position: absolute;
  //   transform: translate(-50%,-50%);
  //   left: 50%;
  //   top: 60%;
  // width: 47%;
  // height: 90%;

  // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
  width: 100%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  font-size: 12px;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
  // border: 1px solid gray;
  // flex: 1;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 2px 5px;
}

.echartsTable .typeshi {
  width: 50%;
}

.echartsTable tr:nth-child(even) {
  border-bottom: 1px solid gray;
  background: #f9f9f9;
}
</style>
